<template>
  <div class="home">

    <div>
      <h1 class="head-message">欢迎来到新疆维吾尔自治区博物馆！</h1>
    </div>

    <!-- 博物馆照片 -->
    <div class="museum-photo">
      <img src="@/assets/museum.jpg" alt="博物馆照片" />
    </div>

    <!-- 博物馆介绍和欢迎词 -->
    <div class="info-container">
      <h1 class="welcome-message">本馆介绍</h1>
      <p class="museum-description">
        这里是一个充满历史与文化的殿堂，我们致力于展示和保护珍贵的文物，让每一位来访者都能深入了解我们的历史遗产。无论您是家庭游客、学生团体还是学术研究者，我们都有丰富的展览和活动等待您的参与。
      </p>
      <!-- 可以添加一个预约按钮或链接
      <el-button type="primary" @click="navigateToBooking">立即预约参观</el-button>
       -->
    </div>
  </div>
</template>
<script>

export default {
  name: 'HomeView',
}
</script>

<style scoped>

.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 占据整个视口高度 */
  padding: 20px;
  box-sizing: border-box; /* 包括内边距和边框在内计算宽度和高度 */
  background-color: #f5f5f5; /* 背景色 */
}

.head-message {
  font-size: 32px; /* 调整为更大的字体 */
  margin-bottom: 20px; /* 可选：增加底部间距以使布局更美观 */
  color: #333; /* 文字颜色 */
}

.museum-photo {
  width: 100%;
  max-width: 1000px; /* 图片容器的最大宽度 */
  margin-bottom: 30px;
  text-align: center; /* 用于水平居中块级元素（在这里是图片） */
}

.museum-photo img {
  max-width: 100%; /* 图片的最大宽度不超过其父容器 */
  height: auto; /* 保持图片比例 */
  display: inline-block; /* 使margin: 0 auto;生效 */
  margin: 0 auto; /* 水平居中 */
}

.info-container {
  text-align: center;
}

.welcome-message {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333; /* 文字颜色 */
}

.museum-description {
  font-size: 16px;
  color: #666; /* 文字颜色 */
  line-height: 1.5; /* 行高 */
  max-width: 600px; /* 描述文本的最大宽度 */
  margin: 0 auto; /* 水平居中 */
}

/* 如果需要Element UI按钮样式，请取消注释以下部分
.el-button {
  margin-top: 20px;
}
*/
</style>
